<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行卡删除 - 管理后台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #e0e7ff 0%, #f5f7fa 100%);
            font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
            color: #333;
            line-height: 1.6;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            max-width: 500px;
            width: 100%;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            width: 100%;
        }

        .header h1 {
            font-size: 2.2rem;
            color: #d32f2f;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

        .header p {
            font-size: 1.1rem;
            color: #555;
            max-width: 500px;
            margin: 0 auto;
        }

        .card {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
            padding: 40px;
            width: 100%;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-top: 4px solid #d32f2f;
        }

        .section-title {
            font-size: 28px;
            color: #d32f2f;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid rgba(211, 47, 47, 0.2);
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .section-title i {
            color: #d32f2f;
            font-size: 28px;
        }

        .form-group {
            margin-bottom: 28px;
        }

        .form-group label {
            display: block;
            margin-bottom: 12px;
            font-weight: 600;
            color: #444;
            font-size: 18px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .form-group input {
            width: 100%;
            padding: 16px;
            border: 2px solid #f0f0f0;
            border-radius: 10px;
            font-size: 17px;
            transition: all 0.3s;
            background: #fafafa;
        }

        .form-group input:focus {
            border-color: #d32f2f;
            box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.15);
            outline: none;
            background: #fff;
        }

        .warning-box {
            background: linear-gradient(to right, #fff8f8, #ffeded);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 25px;
            border-left: 4px solid #d32f2f;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .warning-box i {
            font-size: 28px;
            color: #d32f2f;
        }

        .warning-content h3 {
            font-size: 18px;
            color: #d32f2f;
            margin-bottom: 5px;
        }

        .warning-content p {
            font-size: 15px;
            color: #555;
            line-height: 1.6;
        }

        .btn-group {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .btn-delete {
            flex: 1;
            padding: 18px;
            border-radius: 10px;
            font-size: 20px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            background: linear-gradient(to right, #d32f2f, #ff5252);
            color: #fff;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            box-shadow: 0 4px 12px rgba(211, 47, 47, 0.25);
        }

        .btn-delete:hover {
            background: linear-gradient(to right, #b71c1c, #d32f2f);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(211, 47, 47, 0.35);
        }

        .btn-cancel {
            flex: 1;
            padding: 18px;
            border-radius: 10px;
            font-size: 20px;
            font-weight: 600;
            cursor: pointer;
            border: 2px solid #1a3a6c;
            background: transparent;
            color: #1a3a6c;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }

        .btn-cancel:hover {
            background: #f0f5ff;
            transform: translateY(-3px);
        }

        .result-card {
            margin-top: 25px;
            border-radius: 12px;
            padding: 20px;
            font-size: 17px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            display: none;
            align-items: center;
            gap: 15px;
            transition: all 0.4s ease;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .result-card.success {
            background: #f0fdf4;
            border-left: 4px solid #2ecc71;
            color: #2ecc71;
        }

        .result-card.error {
            background: #fef2f2;
            border-left: 4px solid #e74c3c;
            color: #e74c3c;
        }

        .result-card.processing {
            background: #f0f9ff;
            border-left: 4px solid #1a73e8;
            color: #1a73e8;
        }

        footer {
            margin-top: 40px;
            text-align: center;
            width: 100%;
            color: #666;
            padding: 20px 0;
            font-size: 15px;
            border-top: 1px solid #eee;
            max-width: 500px;
        }

        @media (max-width: 600px) {
            .card {
                padding: 30px;
            }

            .btn-group {
                flex-direction: column;
            }

            .header h1 {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1><i class="fas fa-credit-card"></i> 银行卡删除</h1>
            <p>删除银行卡信息 - 请谨慎操作，此操作不可逆转</p>
        </div>

        <div class="card">
            <div class="section-title">
                <i class="fa fa-credit-card"></i> 银行卡删除
            </div>

            <div class="warning-box">
                <i class="fas fa-exclamation-triangle"></i>
                <div class="warning-content">
                    <h3>重要警告</h3>
                    <p>删除银行卡操作将从系统中永久移除该银行卡的所有信息，包括交易记录和相关数据。请确认您有权限执行此操作。</p>
                </div>
            </div>

            <div class="form-group">
                <label for="delete-cardID">
                    <i class="fas fa-credit-card"></i> 银行卡号
                </label>
                <input
                    id="delete-cardID"
                    type="text"
                    placeholder="请输入要删除的银行卡号"
                >
            </div>

            <div class="form-group">
                <label for="delete-pass">
                    <i class="fas fa-lock"></i> 密码
                </label>
                <input
                    id="delete-pass"
                    type="password"
                    placeholder="请输入密码"
                >
            </div>

            <div class="btn-group">
                <button class="btn-cancel" onclick="clearForm()">
                    <i class="fas fa-times"></i> 取消
                </button>
                <button class="btn-delete" onclick="deleteCard()">
                    <i class="fa fa-trash"></i> 删除银行卡
                </button>
            </div>

            <div class="result-card" id="delete-msg">
                <i class="fa"></i>
                <span id="delete-result-text"></span>
            </div>
        </div>
    </div>

    <script>
        function deleteCard() {
            const cardID = document.getElementById('delete-cardID').value.trim();
            const password = document.getElementById('delete-pass').value.trim();

            if (!cardID || !password) {
                showMsg('请填写完整信息！', 'error');
                return;
            }

            // 显示处理中状态
            showMsg('处理中...', 'processing');

            fetch('http://localhost:8080/admin/card/delete', {
                method: 'DELETE',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ cardID, password })
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === '200') {
                    showMsg('删除成功！', 'success');
                    // 清空表单
                    clearForm();
                } else {
                    showMsg('删除失败：' + (data.message || '未知错误'), 'error');
                }
            })
            .catch(error => {
                showMsg('请求失败：' + error, 'error');
            });
        }

        // 显示消息函数
        function showMsg(msg, type) {
            const el = document.getElementById('delete-msg');
            const icon = el.querySelector('i');
            const textSpan = document.getElementById('delete-result-text');

            // 设置消息内容
            textSpan.innerText = msg;

            // 设置样式
            el.style.display = 'flex';

            // 根据消息类型设置样式
            if (type === 'success') {
                el.className = 'result-card success';
                icon.className = 'fa fa-check-circle';
            }
            else if (type === 'error') {
                el.className = 'result-card error';
                icon.className = 'fa fa-times-circle';
            }
            else if (type === 'processing') {
                el.className = 'result-card processing';
                icon.className = 'fa fa-spinner fa-spin';
            }

            // 自动隐藏消息（成功/错误消息）
            if (type !== 'processing') {
                setTimeout(() => {
                    el.style.display = 'none';
                }, 3000);
            }
        }

        // 清空表单函数
        function clearForm() {
            document.getElementById('delete-cardID').value = '';
            document.getElementById('delete-pass').value = '';
        }
    </script>
</body>
</html>